import {defineComponent, PropType, reactive, watch} from 'vue'

export const CRadio = defineComponent({
  props: {
    value: {
      type: String
    },
    name: {
      type: String,
      required: true
    },
    options: {
      type: Array as PropType<{label: any; value: any}[]>,
      required: true
    }
  },
  emits: {
    'update:value': (value: string | undefined): boolean =>
      true
  },
  setup(props, {emit}) {
    let state = reactive<{value: string | undefined}>({
      value: undefined
    })

    watch(
      () => props.value,
      n => {
        state.value = n
      },
      {
        immediate: true
      }
    )

    watch(
      () => state.value,
      n => {
        emit('update:value', n)
      }
    )

    // onChange={(e: any) => {
    //   let value = e.target.value
    //   emit('update:value', value)
    // }}

    return () => (
      <a-radio-group
        v-model={[state.value, 'value']}
        size='small'
        name={props.name}
      >
        {props.options.map((option, i) => (
          <a-radio value={option.value}>
            {option.label}
          </a-radio>
        ))}
      </a-radio-group>
    )
  }
})
